<template>
  <transition name="model">
    <div class="info-wrapper" v-if="showModal">
      <div class="info"> 大哥，你啥也没输入！</div>
    </div>
  </transition>

  <div>
    <span class="dustbin">🗑</span>
    <h1 @click="add">增加数量：{{ count }}</h1>
    <div class="todo-list">
      <input type="text" v-model="title" @keydown.enter="addTodo"/>
      <button v-if="active < all" @click="clear">清理</button>
      <transition-group name="flip-list" tag="ul" v-if="todos.length">
        <li v-for="(item, i) in todos" :key="item">
          <input type="checkbox" v-model="item.done"/>
          <span :class="{ done: item.done }">{{ item.title }}</span>
          <span class="remove-btn" @click="removeTodo($event,i)">❌</span>
        </li>
      </transition-group>
      <div v-else>暂无数据</div>
      <div>
        全选<input type="checkbox" v-model="allDone"/>
        <span> {{ active }} / {{ all }} </span>
      </div>
    </div>
  </div>
  <div class="animate-wrap">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="animate" v-show="animate.show">📋</div>
    </transition>
  </div>
</template>

<script setup>
  import {ref, computed, reactive} from 'vue'
  import useStorage from '../utils/useLocastore'

  const count = ref(0);
  let color = ref('red')

  function add() {
    count.value++
    color.value = Math.random() > 0.5 ? 'blue' : 'red'
  }

  const {title, animate, showModal, todos, addTodo, removeTodo, clear, active, all, allDone, beforeEnter, enter, afterEnter} = useTodos()

  function useTodos() {
    let title = ref("");
    let showModal = ref(false)
    let animate = reactive({
      show: false,
      el: null
    })
    // let todos = ref([{ title: "学习Vue", done: false }]);
    let todos = useStorage('todos', [])

    function addTodo() {
      if (!title.value) {
        showModal.value = true
        setTimeout(() => {
          showModal.value = false
        }, 1500)
        return
      }
      todos.value.push({
        title: title.value,
        done: false,
      });
      title.value = "";
    }

    function removeTodo(e, i) {
      animate.el = e.target
      animate.show = true
      todos.value.splice(i, 1)
    }

    function clear() {
      todos.value = todos.value.filter((v) => !v.done);
    }

    let active = computed(() => {
      return todos.value.filter((v) => !v.done).length;
    });
    let all = computed(() => todos.value.length);
    let allDone = computed({
      get: function () {
        return active.value === 0;
      },
      set: function (value) {
        todos.value.forEach((todo) => {
          todo.done = value;
        });
      },
    });

    function beforeEnter(el) {
      let dom = animate.el
      let rect = dom.getBoundingClientRect()
      console.log(rect)
      let x = window.innerWidth - rect.left - 60
      let y = rect.top - 10
      el.style.transform = `translate(-${x}px, ${y}px)`
    }

    function enter(el, done) {
      console.log(done)
      document.body.offsetHeight
      el.style.transform = `translate(0, 0)`
      el.addEventListener('transitionend', done)
    }

    function afterEnter(el) {
      animate.show = false
      el.style.display = 'none'
    }

    return {
      title,
      animate,
      showModal,
      todos,
      addTodo,
      removeTodo,
      clear,
      active,
      all,
      allDone,
      beforeEnter,
      enter,
      afterEnter
    };
  }
</script>

<style scoped lang="scss">
  $padding: 10px;
  $white: #fff;

  .todo-list {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    ul {
      width: 100%;
      margin: 0 auto;
      padding: 0;

      li {
        &:hover {
          cursor: pointer;
        }

        position: relative;
        text-align: left;
        list-style-type: none;
        margin-bottom: $padding;
        padding: $padding;
        background: $white;
        box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
        border: 1px solid #eee;
        .remove-btn {
          position: absolute;
          right: 5px;
        }
      }
    }
    input[type=text] {
      width: 100%;
      padding: 0;
      box-sizing: border-box;
      border: none;
      height: 26px;
    }
  }

  h1 {
    color: v-bind(color);
  }

  .info-wrapper {
    position: fixed;
    top: 20px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
  }

  .info {
    padding: 20px;
    color: white;
    background: #d88986;
  }

  .model-enter-from, .model-leave-to {
    /*opacity: 0;*/
    transform: translateY(-60px);
  }

  .model-enter-active, .model-leave-active {
    animation: move .1s linear infinite;
    transition: all 3s ease;
  }

  @keyframes move {
    0% {
      transform: translateX(-5px)
    }
    50% {
      transform: translateX(0)
    }
    100% {
      transform: translateX(5px)
    }
  }

  .flip-list-move {
    transition: transform .8s ease;
  }

  .flip-list-enter-active, .flip-list-leave-active {
    transition: all 1s ease;
  }

  .flip-list-enter-from, .flip-list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  .dustbin {
    font-size: 20px;
    position: fixed;
    right: 30px;
    top: 10px;
  }

  .animate-wrap .animate {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 100;
    transition: all 0.5s linear;
  }
</style>
